<template>
  <div class="form-app">
    <el-form label-position="left" label-width="120px" id="formItemApp">
      <template v-for="(item, index) in formItemList">
        <el-row class="dragItem" :index="index" :key="item.primaryKey">
          <el-col :span="10">
            <el-form-item :label="item.itemName ? item.itemName : '未定义'" @dblclick.native="setItemLayout(item)" :class="{ column: item.itemLayout === 2 }">
              <el-input class="full-width" :placeholder="getPlaceHolder(item.itemLayout)" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <div class="no-content-box" v-if="formItemList.length == 0">暂无样式</div>
    </el-form>
  </div>
</template>
<script>
  import Sortable from 'sortablejs';
  import $ from 'jquery';

  import { formItemMobileList, formItemlayoutMobileCreate } from '../../../api/process';
  export default {
    props: ['itemData'],
    data() {
      return {
        formItemList: [],
      };
    },
    mounted() {
      let that = this;
      var el = document.getElementById('formItemApp');
      var sortable = Sortable.create(el, {
        animation: 150,
      });
    },
    methods: {
      async getList() {
        let res = await formItemMobileList({
          formKey: this.$route.query.primaryKey,
        });
        if (res.success) {
          let list = JSON.parse(JSON.stringify(res.rows)) || [];
          list.forEach(item => {
            item.itemLayout = item.itemLayout ? item.itemLayout : 1;
          });
          if (list[0].itemOrder == 1) {
            list.forEach(com => {
              com.itemOrder = com.itemOrder - 1;
            });
          }
          if (!list[0].itemOrder) {
            list.forEach((com, index) => {
              com.itemOrder = index;
            });
          }
          this.formItemList = list;
        }
      },
      getPlaceHolder(itemLayout) {
        let placeholderText = '双击切换布局或拖拽排序';

        if (itemLayout === 1 || !itemLayout) {
          placeholderText += ' 左右布局';
        } else {
          placeholderText += ' 上下布局';
        }

        return placeholderText;
      },
      setItemLayout(item) {
        let itemLayout = 1;

        if (item.itemLayout === 1 || !item.itemLayout) {
          itemLayout = 2;
        } else {
          itemLayout = 1;
        }

        item.itemLayout = itemLayout;
      },
      async saveStyle() {
        let that = this;
        let dragItemElements = $('#formItemApp .dragItem');
        let formItemList = [];
        dragItemElements.each((index, el) => {
          let itemIndex = Number($(el).attr('index'));
          let item = that.formItemList[itemIndex];
          item.itemOrder = index;
          item.itemKey = item.primaryKey;
          formItemList.push(item);
        });
        let res = await formItemlayoutMobileCreate({
          list: formItemList,
        });
        if (res.success) {
          this.$message.success(res.message);
        }
      },
    },
    computed: {
      readonly() {
        return false;
      },
    },
  };
</script>
<style lang="scss">
  .form-app {
    .column {
      .el-form-item__label {
        float: none !important;
      }

      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
</style>
